<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/static_data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/static_ajax.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			#main {
				width: 80%;
			}
			
			#words {
				margin-top: 20px;
				margin-left: 10%;
				width: 80%;				
			}
			.words-row{
				margin-top: 15px;
			}
		</style>
	</head>

	<body id="app">
		<div id="main" class="container">
			<form class="form-inline text-center">
				<div class="form-group">
					<input type="text" class="form-control" v-model="current_word" />
					<input type="button" class="form-control" value="新增" v-on:click="add_word" />
				</div>
			</form>
			<div id="words">
				<div class="row words-row" v-for="word in words">
					<div class="col-md-2">{{word.word}}</div>
					<div class="col-md-8">{{word.mean}}</div>
					<div class="col-md-2">
						<input type="button" value="删除" class="btn btn-default" v-on:click="delete_word(word.word)" /></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js_locgic/add_word.js" type="text/javascript" charset="utf-8"></script>

</html>